<template>
	<page-meta :root-font-size="fontValue + 'px'"></page-meta>
	<view>
		<uni-nav-bar title="提现" leftIcon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true" :border="false"
			backgroundColor="#F93D3E" color="#fff">
		</uni-nav-bar>

		<view class="px-32 py-36 mt-32 bg-FFF text-28">
			<view class="flex items-center">
				<view class="font-700">
					提现至：
				</view>
				<div class="" v-if="moneyId == 7" @click="payWay = true">
					<view class="text-gray" v-if="payMode == null">
						选择提现方式
					</view>
					<view class="flex items-center" v-else>
						<image
							src="https://lbst.lubaoshengtai.com/profile/upload/2023/04/25/image/icon_weixinqianbao.png"
							class="image-48" mode="" v-if="payMode == 1"></image>
						<view class="font-700">
							{{payMode == 1 ? '微信钱包' : payMode == 2 ? '支付宝余额' : cardArr[selectCard].openBank}}
						</view>
					</view>
					<u-icon name="arrow-down" :bold="true" color="#333"></u-icon>
				</div>
				<div class="flex items-center justify-between" style="flex-grow: 1;"
					v-if="moneyId == 11 && storeBankInfo">
					<div class="">
						{{storeBankInfo.realName}}--{{storeBankInfo.openBank}}--{{storeBankInfo.cardNo}}
					</div>
					<div class="" @click="showModal = true" v-if="!storeBankInfo.subMchId">
						修改
					</div>
				</div>
			</view>
		</view>

		<view class="mt-32 bg-FFF px-32 py-32">
			<view class="flex items-center justify-between">
				<view class="text-28 font-700">
					可提现金额：{{balance}}元
				</view>
				<view class="fontS-24 text-gray" @click="price = balance">
					全部提现
				</view>
			</view>
			<view>
				<view class="mt-24 flex mflex items-center">
					<view class="text-48 font-700">
						￥
					</view>
					<u--input type="digit" v-model="price" fontSize="22px" placeholder="填写金额" border="none"></u--input>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view class="text-gray text-20 mt-20">
				<!-- 注：提现金额请输入整百，最低提现100，手续费包含在提现金额中。 -->
			</view>

			<!-- <view class="mt-48 text-28 flex items-center justify-between">
				<view class="text-gray">
					提现手续费比例：
				</view>
				<view class="">
					{{serviceCharge}}
				</view>
			</view> -->
			<view class="mt-28 text-28 flex items-center justify-between">
				<view class="text-gray">
					预计到账时间：
				</view>
				<view class="">
					24小时内
				</view>
			</view>
			<view class="mt-28 text-28 flex items-center justify-between">
				<view class="text-gray">
					提现注意事项：
				</view>
				<view class="box-8" @click="showTips">
					点击查看
				</view>
			</view>

			<view class="box_1 round-4 text-center text-28 text-FFF" @click="confirm">
				立即提现
			</view>
		</view>

		<view class="px-32 bg-FFF py-32 mt-32">
			<view class="text-28 flex items-center justify-between">
				<view class="text-36 font-700">
					提现明细
				</view>
				<view class="flex items-center" @click="timePicker = true">
					<view class="mr-12">
						{{selectedTime}}
					</view>
					<u-icon name="arrow-down" :bold="true" color="#333"></u-icon>
				</view>
			</view>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="text-28 mt-28" v-for="(item,index) in list" :key="index">
					<u-line color="#EDEDED"></u-line>
					<view class="py-36">
						<view class="flex items-center justify-between">
							<view>
								提现
							</view>
							<view class="text-36 text-FF8400">
								￥{{item.withdrawAmount}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32" v-if="item.verifyState == 1">
							<view class="flex items-center">
								<image
									src="https://lbst.lubaoshengtai.com/profile/upload/2023/04/25/image/icon_shenqingshijian.png"
									style="width: 28rpx;height: 28rpx" mode="">
								</image>
								<view class="ml-16">
									实际到账：
								</view>
							</view>
							<view v-if="item.realAmount">
								￥{{item.realAmount}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32" v-if="item.verifyState == 1">
							<view class="flex items-center">
								<image
									src="https://lbst.lubaoshengtai.com/profile/upload/2023/04/25/image/icon_shenqingshijian.png"
									class="image-28" mode="">
								</image>
								<view class="ml-16">
									实际到账时间：
								</view>
							</view>
							<view v-if="item.paymentTime">
								{{item.paymentTime}}
							</view>
						</view>

						<view class="text-gray flex items-center justify-between mt-32">
							<view class="flex items-center">
								<view class="ml-16">
									申请时间：
								</view>
							</view>
							<view>
								{{item.createTime}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32">
							<view class="flex items-center">
								<view class="ml-16">
									申请状态：
								</view>
							</view>
							<view>
								<u-tag v-if="item.verifyState == 0" text="待审核" type="warning"></u-tag>
								<u-tag v-if="item.verifyState == 1" text="审核通过" type="success"></u-tag>
								<u-tag v-if="item.verifyState == 2" text="审核失败" type="error"></u-tag>
								<!-- {{item.verifyState == 0 ? '待审核' : item.verifyState == 1 ? '审核通过':'审核失败'}} -->
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32"
							v-if="item.verifyState != 0 && item.remark">
							<view class="flex items-center">
								<view class="ml-16">
									审核备注：{{item.remark}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<!-- <u-datetime-picker :show="timePicker" v-model="time" mode="year-month" @confirm="timeConfirm"
			@cancel="timePicker = false"></u-datetime-picker> -->

		<u-datetime-picker :show="timePicker" v-model="time" @confirm="timeConfirm" @close="timePicker=false"
			@cancel="timePicker=false" mode="year-month" :formatter="formatter"
			:closeOnClickOverlay="true"></u-datetime-picker>


		<!-- 选择支付方式 -->
		<view class="box_2" v-if="payWay">
			<view class="box_3" @click="payWay = false">

			</view>
			<view class="box_4 bg-FFF border-r24" :class="payWay ? 'box_8':'box_9'">
				<view>
					<view class="box_5 po-r text-center text-28">
						选择提现账户
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_quxiao@2x.png"
						class="image_2" mode="" @click="payWay = false"></image>
				</view>
				<view class="px-32">
					<view class="py-40 flex items-center justify-between" @click="bankClick">
						<view class="flex items-center">
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_yinhangka@2x.png"
								style="width: 48rpx;height: 48rpx;" mode=""></image>
							<view class="text-28 ml-16">
								{{cardArr.length > 0 ? '提现至银行卡' : '请先添加您的银行卡'}}
							</view>
						</view>
						<image src="https://coo.fcios.com/profile/upload/2023/01/17/icon_jiantou.png" mode=""
							class="image_1"></image>
					</view>
				</view>
			</view>
		</view>


		<view class="box_2" v-if="cardPopup">
			<view class="box_3" @click="closeCardPopup">

			</view>
			<view class="box_4 bg-FFF border-r24" :class="cardPopup ? 'box_8':'box_9'">
				<view>
					<view class="box_5 po-r text-center text-28">
						选择银行卡
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_quxiao@2x.png"
						class="image_2" mode="" @click="closeCardPopup"></image>
				</view>
				<view class="px-32">
					<view v-for="(item,index) in cardArr" :key="index">
						<view class="py-40 flex items-center justify-between" @click="selectFun(index)">
							<view class="flex items-center">
								<view class="text-28 ml-16">
									{{item.openBank}}
								</view>
							</view>
							<view class="box_6 flex items-center justify-around round">
								<view class="box_7 round" v-if="payMode == 3 && selectCard == index">

								</view>
							</view>
						</view>
						<u-line color="#EDEDED"></u-line>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="showModal" title="修改银行卡信息" showCancelButton @confirm="submitForm" @cancel="showModal = false">
			<view class="form-container">
				<u-form ref="formRef" :model="formData" labelWidth="80">
					<!-- 真实姓名 -->
					<u-form-item label="真实姓名" prop="realName" required>
						<u-input v-model="formData.realName" placeholder="请输入真实姓名"></u-input>
					</u-form-item>

					<!-- 开户行 -->
					<u-form-item label="开户行" prop="openBank" required>
						<u-input v-model="formData.openBank" placeholder="请输入开户行名称"></u-input>
					</u-form-item>

					<!-- 银行卡号 -->
					<u-form-item label="银行卡号" prop="cardNo" required>
						<u-input v-model="formData.cardNo" placeholder="请输入银行卡号" type="number"
							maxlength="19"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: "",
				user: '',
				timePicker: false,
				selectedTime: null,
				time: Number(new Date()),
				list: [],
				payWay: false,
				cardPopup: false,
				payMode: null,
				cardArr: [],
				selectCard: 0,
				balance: null,
				serviceCharge: null,
				moneyId: null,
				fontValue: null,

				storeBankInfo: null,

				showModal: false, // 控制弹窗显示
				formData: {
					realName: "", // 真实姓名
					openBank: "", // 开户行
					cardNo: "", // 银行卡号
				},
			};
		},
		onLoad(e) {
			this.fontValue = this.$store.getters.fontValue
			this.selectedTime = this.$modal.timeFun(Number(new Date()), 'YYYY-MM')
			this.moneyId = e.moneyId
			// this.getData()

			if (this.moneyId == 11) {
				this.$Api.index.storeBankCardInfo().then(res => {
					console.log(res)
					this.storeBankInfo = res.data
				})
			}
		},
		onShow() {
			this.refresh()
			this.getCard()
		},
		methods: {
			submitForm() {
				if (!this.formData.realName || !this.formData.openBank || !this.formData.cardNo) {
					uni.showToast({
						title: "请填写完整信息",
						icon: "none"
					});
					return;
				}
				if (!/^\d{16,19}$/.test(this.formData.cardNo)) {
					uni.showToast({
						title: "银行卡号格式错误",
						icon: "none"
					});
					return;
				}
				this.$Api.index.updateBankCard(this.formData).then(res=>{
					this.$Api.index.storeBankCardInfo().then(res => {
						console.log(res)
						this.storeBankInfo = res.data
						this.showModal = false
						this.$modal.msg('修改成功!')
					})
				})
			},
			async getData() {
				const res = await this.$Api.common.configKey('SERVICE_CHARGE')
				console.log(res, '手续费')
				this.serviceCharge = res.msg
			},
			showTips() {
				uni.showModal({
					showCancel: false,
					title: "注意事项",
					content: "提现前请认真核实提现账户是否正确，账户错误导致的损失由用户自行负责。提现申请后，T+1审核！节假日不提现，顺延至下一个工作日，感谢您的理解和支持",
				})
			},
			closeCardPopup() {
				this.payMode = null
				this.cardPopup = false
				this.payWay = true
			},
			selectFun(index) {
				console.log(index, 'index')
				this.selectCard = index
				this.cardPopup = false
			},
			bankClick() {
				if (this.cardArr.length > 0) {
					this.getCard()
					this.payMode = 3
					this.payWay = false
					this.cardPopup = true
				} else {
					uni.navigateTo({
						url: "/pages/mine/bankCard/addSavings?flag=1"
					})
				}
			},
			async getCard() {
				const res2 = await this.$Api.user.bankCardList()
				console.log(res2, '银行卡')
				this.cardArr = res2.rows || []

				const userRichInfo = await this.$Api.user.userRichInfo()

				userRichInfo.data.forEach(item => {
					item.amount = item.amount.toFixed(2)

					if (this.moneyId == item.moneyId) {
						this.balance = item.amount
					}
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.user.withdrawRecordList({
						moneyId: this.moneyId,
						pageNum: pullScroll.page,
						pageSize: 10,
						createTime: this.selectedTime + '-01 00:00:00'
					}).then(res => {
						console.log(res, '提现记录')
						if (pullScroll.page == 1) {
							this.list = [];
						}
						res.rows = res.rows ? res.rows : []
						this.list = this.list.concat(res.rows);
						if (pullScroll.page == 1 && res.total == 0) {
							pullScroll.empty();
							return
						}
						if (this.list.length >= res.total) {
							pullScroll.finish();
						} else {
							pullScroll.success();
						}
					})
				}, 500);
			},
			async confirm() {
				// if(this.$store.getters.userInfo.verifyState != 1){
				// 	this.$modal.confirm('签到需要先进行实名认证!').then(con=>{
				// 		if(con){
				// 			this.$tab.nav('/pages/mine/realPerson/index')
				// 		}
				// 	})
				// 	return
				// }
				// let day = new Date(new Date()).getDay()
				// if (day == 6 || day == 0) {
				// 	this.$modal.msg('节假日不提现，顺延至下一个工作日')
				// 	return
				// }

				if (this.payMode == null && this.moneyId == 7) {
					this.$modal.msg('请选择提现方式')
					return
				}

				// if (!uni.$u.test.digits(Number(this.price)) || this.price.substring(this.price.length - 2) != '00' ||
				// 	this.price.indexOf('.') != -1) {
				// 	this.$modal.msg('提现金额需整百，最低100可提现')
				// 	return
				// }
				let form = {
					withdrawAmount: this.price,
					withdrawWay: this.payMode,
					moneyId: this.moneyId,
				}

				if (this.moneyId == 7) {
					form.withdrawType = 1
					form.bankCard = this.payMode == 3 ? this.cardArr[this.selectCard].id : ''
				} else {
					form.withdrawType = 2
					form.withdrawWay = 3
				}

				const res = await this.$Api.user.withdrawRecord(form)
				this.price = ""
				this.refresh()
			},
			timeConfirm(e) {
				this.selectedTime = this.$modal.timeFun(e.value, 'YYYY-MM')
				this.timePicker = false
				this.refresh()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.box_1 {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 48rpx auto 0;
		background-color: #F93D3E;
	}

	.image_1 {
		width: 48rpx;
		height: 48rpx;
	}

	@keyframes up {
		0% {
			bottom: -380rpx;
		}

		100% {
			bottom: 100rpx;
		}
	}

	@keyframes down {
		0% {
			bottom: 100rpx;
		}

		100% {
			bottom: -380rpx;
		}
	}

	.box_2 {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;

		.box_3 {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.box_8 {
			animation: up 0.5s linear forwards;
		}

		.box_9 {
			animation: up 0.5s down forwards;
		}

		.box_4 {
			width: 686rpx;
			position: absolute;
			left: 32rpx;
			z-index: 1;

			.box_5 {
				height: 112rpx;
				background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/bank_nav_bg@2x.png) no-repeat;
				background-size: 100% 100%;
				line-height: 112rpx;
			}

			.image_2 {
				position: absolute;
				right: 28rpx;
				top: 32rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.box_6 {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid #F93D3E;
			}

			.box_7 {
				width: 16rpx;
				height: 16rpx;
				background: #F93D3E;
			}
		}
	}


	.box-8 {
		color: #F93D3E;
	}
</style>